import { request } from '@/utils';
import { Button, Form, Input, message } from 'antd';
import React from 'react'
import { useHistory } from 'react-router';
import { Link } from 'react-router-dom';

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

function register() {
  const history = useHistory()

  const onFinish = (values: any) => {
    console.log('Success:', values);
    if (values.password != values.password2) {
      message.error("两次密码不同")
      return
    }
    request("user/register", values, res => {
      message.success("注册成功")
      history.replace("/login")
    }, res => message.error(res))
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      height: '100%',
      paddingTop: '20%'
    }}>
      <h3 style={{
        marginBottom: 36,
      }}>章鱼工具箱</h3>
      <Form
        style={{
          maxWidth: 400
        }}
        {...layout}
        name="basic"
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="邮箱"
          name="email"
          rules={[{ required: true, message: 'Please input your email!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          label="确认密码密码"
          name="password2"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit" style={{
            width: '100%'
          }}>
            注册
        </Button>
        或 <Link to="/login">登录!</Link>
        </Form.Item>
      </Form>
    </div>
  )
}

export default register
